<template>
    <div class="project-box">
        <el-row :gutter="20" type="flex" justify="space-between">
            <el-col :sm="12" :md="8" :lg="8" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>总栋数</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text">
                        <h1>{{headData.buildingNum}}</h1>
                        <p>个</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>建筑面积</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text">
                        <h1>{{headData.constructionArea}}</h1>
                        <p>m²</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>资产总套数</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text">
                        <h1>{{headData.totalAssets}}</h1>
                        <p>套</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="12" :lg="12" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>出租率</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-flex card-circle">
                        <div>
                            <el-progress type="circle" :percentage="Number(headData.useRate.areaPercentage)" :width="80" :stroke-width="4" :color="'#745af2'"></el-progress>
                            <p>面积出租率</p>
                        </div>
                        <span class="line"></span>
                        <div>
                            <el-progress type="circle" :percentage="Number(headData.useRate.setsPercentage)" :width="80" :stroke-width="4" :color="'#745af2'"></el-progress>
                            <p>套数出租率</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="12" :lg="12" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>空置率</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-flex">
                        <div>
                            <el-progress type="circle" :percentage="Number(headData.vacancyRate.constructionArea)" :width="80" :stroke-width="4" :color="'#ad321c'"></el-progress>
                            <p>建筑面积</p>
                        </div>
                        <span class="line"></span>
                        <div>
                            <el-progress type="circle" :percentage="Number(headData.vacancyRate.numberAssets)" :width="80" :stroke-width="4" :color="'#ad321c'"></el-progress>
                            <p>资产数量</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>空置情况</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-flex card-both">
                        <div>
                            <h1>{{headData.controlSituation.area}}</h1>
                            <p>m²</p>
                        </div>
                        <span class="line"></span>
                        <div>
                            <h1>{{headData.controlSituation.area}}</h1>
                            <p>户</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>物业类别占比</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-circle">
                        <div id="pieChart" style="width: 100%;height:100%;min-height:110px;box-sizing:border-box;"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8" :xl="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>项目用途占比</span>
                        <el-button style="float: right; padding: 3px 0; color: #373737" type="text">
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                    <div class="card-text card-circle">
                        <div id="circularChart" style="width: 100%;height:100%;min-height:110px;box-sizing:border-box;"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="property-main box-shadow">
            <div class="main-header">
                <el-input
                    placeholder="输入楼栋名称"
                    prefix-icon="el-icon-search"
                    v-model="inputSearch"
                    @keyup.enter.native="handleInputSearch()">
                </el-input>
                <div>
                    <el-button @click="handleClickBuilding">查看楼栋列</el-button>
                    <el-button @click="showDialog">纠错</el-button>
                </div>
            </div>
            <el-tabs :tab-position="tabPosition" value="0" class="main-center" @tab-click="handleTabClick">
                <el-tab-pane v-for="(item, index) in centered" :key="index">
                    <span slot="label">
                        <div class="center-left">
                            <div>
                                <h3>{{item.buildingName}}</h3>
                                <p>用地面积：{{item.landArea}}m²</p>
                                <p>资产总数：{{item.totalAssets}}户</p>
                            </div>
                            <el-button type="text" @click="viewClick(item)">查看</el-button>
                        </div>
                    </span>
										<span v-for="(it,i) in roomStatus" :key="i">
											<span class="childrenSpan" :style="{backgroundColor: getTypeValue(it.value,roomStatusColor)}"></span>
<!--											<span>{{getCardTypeValue(it,item.usage)}}（{{item.usage.num}}）</span>-->
											<span>{{it.label}}（{{getCardTypeValue(it.value,item.usage)}}）</span>
										</span>
                    <el-tabs :tab-position="tabChildren" value="0" class="tabChildren-main">
                        <el-tab-pane v-for="unitInfor in item.unitInformations" :key="unitInfor.unitName">
                            <span slot="label">
                                <div class="tabChildrenCard">
                                    <div>{{unitInfor.unitName}}单元</div>
                                </div>
                            </span>
                            <el-tabs :tab-position="ChildrenItem" value="0" class="ChildrenItem">
                                <el-tab-pane v-for="floor in unitInfor.floors" :key="floor.number">
                                    <span slot="label">
                                        <div class="item-title">{{floor.number}}</div>
                                    </span>
                                    <el-row class="item" >
                                        <el-col :span="4" v-for="(room,index) in floor.rooms" :key="index">
																					<div class="item-purple" :style="{backgroundColor: getTypeValue(room.roomStatus,roomStatusColor)}">{{room.roomCode}}</div>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>

                            </el-tabs>
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
            </el-tabs>
        </div>
        <v-dialog
            title="物业信息纠错"
            :show.sync="dialogVisible"
            :closeOnClickModal="false"
            @beforeClose="beforeClose"
            width="700px">
            <div style="padding: 20px">
                <el-form ref="formErrorRules" :rules="errorCorrectionRules" :model="formError" label-width="80px" label-position="top">
                    <el-form-item label="纠错类型" prop="resource">
                        <el-radio-group v-model="formError.resource">
                            <el-radio label="数据计算错误"></el-radio>
                            <el-radio label="内容填写错误"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="错误描述" prop="desc">
                        <el-input type="text" v-model="formError.desc" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="foot">
                <el-button @click="cancel()">取 消</el-button>
                <el-button @click="commit">保 存</el-button>
            </span>
        </v-dialog>
    </div>
</template>

<script src="./index.js">
</script>

<style lang="scss" scoped>
@import "./index";

</style>
